<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-select class="filter-item" style="width: 180px" v-model="selectValue" placeholder="请先选择工单号" filterable
        clearable @change='search' @clear='search'>
        <el-option v-for="v in orderSelect" :key="v.id" :label="v.mo_no" :value="v.mo_no"> </el-option>
      </el-select>
      <el-input style="width: 180px" placeholder="请输入型号代码" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="search" @clear="search" v-model="finish_model"></el-input>
      <el-button class="filter-item" type="success" plain @click="search">查询</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" header-cell-class-name="headerClass-row">
      <el-table-column prop="mo_no" label="工单编号" show-overflow-tooltip header-align="center"> </el-table-column>
      <el-table-column prop="finish_model" label="成品型号" show-overflow-tooltip header-align="center">
      </el-table-column>
      <el-table-column prop="mo_plan_time" label="开始日期" show-overflow-tooltip header-align="center">
      </el-table-column>
      <el-table-column prop="mo_target_time" label="结束日期" show-overflow-tooltip header-align="center">
      </el-table-column>
      <el-table-column prop="customer" label="客户" show-overflow-tooltip header-align="center"> </el-table-column>
      <el-table-column prop="mo_nums" label="工单数量" show-overflow-tooltip header-align="center"> </el-table-column>
      <el-table-column prop="materials" label="物料" header-align="center">
        <template slot-scope="scope">
          <el-table :data="scope.row.materials" :show-header="false">
            <el-table-column prop="key_part_no" show-overflow-tooltip align="center"></el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column prop="materials" label="需求数量" header-align="center">
        <template slot-scope="scope">
          <el-table :data="scope.row.materials" :show-header="false">
            <el-table-column prop="qty" align="center"></el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column prop="materials" label="已发料数量" header-align="center">
        <template slot-scope="scope">
          <el-table :data="scope.row.materials" :show-header="false">
            <el-table-column prop="issuedMaterial" align="center"></el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column prop="materials" label="差异" header-align="center">
        <template slot-scope="scope">
          <el-table :data="scope.row.materials" :show-header="false">
            <el-table-column prop="different" align="center"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="search" v-show="total > 0"></z-pagination>
  </div>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'production',
  mixins: [commonMixin],
  data() {
    return {
      name: '生产物料',
      api: this.$api.productionList,
      orderSelect: [],
      selectValue: '',
      finish_model: '',
      tableData: [],
      total: 0,
      query: {
        size: 10,
        page: 1,
      },
    }
  },
  created() {
    this.getList()
    this.$request(this.$api.orderNum, { page: 1, size: 999 }).then((res) => {
      this.orderSelect = res.list
    })
  },
  methods: {
    search() {
      this.getList()
    },
    getList() {
      this.pageLoading = true
      this.$request(this.api, { ...this.query, mo_no: this.selectValue, finish_model: this.finish_model })
        .then((res) => {
          console.log(res)
          this.total = res.total
          this.tableData = res.list
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
  },
}
</script>
<style lang='scss' scoped>
::v-deep .el-table {
  .el-table__row td:nth-child(n + 7) {
    padding: 0;
    // background:red;
    .cell {
      padding: 0;
      .el-table::before {
        display: none;
      }
      .el-table {
        tr:last-child {
          td {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>